<template>
  <div class="radar-chart-02 chart" ref="radarChart02"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const radarChart02 = ref(null);
const echarts = inject("$echarts");

let indicatorData = [
  { name: "监管", max: 100 },
  { name: "火警", max: 100 },
  { name: "故障", max: 100 },
  { name: "屏蔽", max: 100 },
  { name: "电源故障", max: 100 },
  { name: "延时", max: 100 },
  { name: "反馈", max: 100 },
];

let seriesData1 = [80, 80, 80, 80, 80, 80, 80];
let seriesData2 = [50, 24, 28, 31, 42, 21, 25];
let seriesData3 = [70, 24, 25, 21, 52, 71, 44];

let option = {
  compCode: "C202310002",
  backgroundColor: "rgb(3,23,30)",
  radar: {
    axisName: {
      color: "#37AFE5",
      fontSize: 14,
      fontFamily: "Source Han Sans CN",
      fontWeight: 400,
    },
    axisLine: {
      lineStyle: {
        color: "#2F49A3",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#2F49A3",
      },
    },
    splitArea: {
      areaStyle: {
        color: ["transparent", "transparent", "transparent", "transparent"],
        shadowColor: "rgba(0, 100, 0, 0.3)",
      },
    },
    indicator: indicatorData,
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: seriesData1,
          name: "数据",
          itemStyle: {
            color: "#fff",
          },
          lineStyle: {
            color: "transparent",
          },
          areaStyle: {
            color: "rgb(47,73,163，0.5)",
          },
        },
        {
          value: seriesData2,
          name: "数据",
          itemStyle: {
            color: "rgba(5, 128, 242, 0.8)",
          },
          areaStyle: {
            color: "#91A9FF",
          },
          symbol: "none",
        },
        {
          value: seriesData3,
          name: "数据",
          itemStyle: {
            show: false,
          },
          lineStyle: {
            color: "#fff",
          },
          areaStyle: {
            color: "transparent",
          },
          symbol: "none",
        },
      ],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(radarChart02.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
